<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/3/11
  Time: 11:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%--
    1.导入css和js
    2.copy div
--%>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css" >

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>
    <title>主页</title>
</head>


<body class="easyui-layout">
    <div data-options="region:'north'" style="height:50px">A</div>
    <div data-options="region:'south'" style="height:50px;">B</div>
    <div data-options="region:'center'">
        <%--选项卡--%>
        <div id="tt" class="easyui-tabs" data-options="fit:true">
            <div title="快递列表一" data-options="closable:true"></div>
            <div title="快递列表二" data-options="closable:true"></div>
            <div title="快递列表三" data-options="closable:true"></div>
            <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px"></div>
        </div>
    </div>
    <div data-options="region:'east'"  style="width:100px;">C</div>
    <div data-options="region:'west'"  style="width:100px;">
        <script type="text/javascript">
            function add(title) {
                $('#tt').tabs('add',{
                    title: title,
                    content: '<div>Content'+title+'</div>',
                    closable: true
                });
            }
        </script>
        <div class="easyui-accordion" data-options="fit:true">
            <div title="标题一">
                <a href="#" onclick="add('派单列表')">收单列表1</a><br>
                <a href="#" onclick="add('派单列表')">收单列表2</a><br>
                <a href="#" onclick="add('派单列表')">收单列表3</a>
            </div>

            <div title="标题二"></div>
            <script>
                //1.创建一个setting
                var setting = {
                    data: {
                        simpleData: {
                            enable:true,
                            idKey: "id",
                            pIdKey: "pId",
                            rootPId: ""
                        }
                    },
                    callback:{
                        onClick:function (event, treeId, treeNode, clickFlag)  {
                            //父标签不需要添加tab
                            if(treeNode.isParent) return;

                            //获取是否有当前点击的选项卡
                            var tab = $('#tt').tabs('exists',treeNode.name);
                            if(tab){//代表存在
                                //如果存在设置为选中状态
                                $('#tt').tabs('select',treeNode.name);
                            }else{
                                //显示新的tab
                                $('#tt').tabs('add',{
                                    title: treeNode.name,
                                    content: '<div>Content'+treeNode.name+'</div>',
                                    closable: true
                                });
                            }

                        }
                    }
                };

                $(document).ready(function(){
                    //1.获取菜单数据
                    var url = "${pageContext.request.contextPath}/json/menu.json"
                    $.get(url,function (data) {
                        //console.log(data);
                        $.fn.zTree.init($("#treeDemo"), setting, data);
                    })
                    //
                });
            </script>
            <ul id="treeDemo" class="ztree"></ul>
            <div title="标题三"></div>
        </div>
    </div>

</body>
</html>
